<template>
  <div class="container">
    <div class="left">
      <div>
        <div>
          <el-row :gutter="10">
            <el-col :span="16">
              <div class="left" style="margin-left: 20px 0">
                <h3 style="margin: 0 0 10px 0">好句分享</h3>
                <div class="juzi">
                  <div class="top">随机好句</div>
                  <div class="neirong">{{alertTitle}}</div>
                  <div class="bottom">
                    <i class="el-icon-edit"></i>
                  </div>
                </div>
                <h3 style="margin: 10px 0">推荐学习网站</h3>
                <div class="collecting">
                  <div class="box" v-for="(item, index) in links" :key="index">
                    <div class="left">
                      <div class="small_box">
                        <span style="color: orange">{{ item.name}}</span>
                        <span style="color: #EDEDED">—————————</span>
                        <a target="_Blank" :href="item.url" class="wrap" style="color: #ADB1B4">{{ item.url}}</a>
                      </div>
                    </div>
                    <div class="right">
                      <div class="img">
                        <img :src="item.img" alt="">
                      </div>
                    </div>
                  </div>
                  
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="right">
                <h3 style="margin: 0 15px">日历</h3>
                <div class="calendar">
                  <el-calendar v-model="date"></el-calendar>
                </div>
                <h3 style="margin: 15px">时间线</h3>
                <div class="timeline">
                  <el-timeline>
                    <el-timeline-item timestamp="8:00-8:30" placement="top">
                      <el-card>
                        <div class="contents">
                          <h4>洗漱吃饭</h4>
                        </div>
                      </el-card>
                    </el-timeline-item>
                    <el-timeline-item timestamp="8:30-12:00" placement="top">
                      <el-card>
                        <div class="contents">
                          <h4>学习</h4>
                        </div>
                      </el-card>
                    </el-timeline-item>
                    <el-timeline-item timestamp="12:00-1:30" placement="top">
                      <el-card>
                        <div class="contents">
                          <h4>吃饭午睡</h4>
                        </div>
                      </el-card>
                    </el-timeline-item>
                    <el-timeline-item timestamp="1:30-18:00" placement="top">
                      <el-card>
                        <div class="contents">
                          <h4>学习</h4>
                        </div>
                      </el-card>
                    </el-timeline-item>
                  </el-timeline>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <!-- <studentBoard v-if="userInfo.level === 2"></studentBoard>
    <teacherBoard v-if="userInfo.level === 1"></teacherBoard>
    <admin-board v-if="userInfo.level === 0"></admin-board> -->
  </div>
</template>

<script>
import studentBoard from "./student-dashboard";
import teacherBoard from "./teacher-dashboard";
import adminBoard from "./admin-dashboard";
import { reqLinks } from '@/api/curriculum'
export default {
  name: "index",
  components: {
    studentBoard,
    teacherBoard,
    adminBoard,
  },
  data() {
    return {
      userInfo: {},
      date: new Date(),
      alertArr: [
        '事业之舟驶到了理想的彼岸。读书是最好的学习，追随伟大人物的思想，是富有趣味的事情。',
        '学问是异常珍贵的东西，从任何源泉吸收都不可耻。',
        '我无所事事的度过的今天是昨天死去的人所奢望的明天。',
        '喜爱读书，就等于把生活中寂寞无聊的时光换成巨大享受的时刻。',
        '学到很多东西的诀窍，就是一下子不要学很多。',
        '我的努力求学没有得到别的好处，只不过是愈来愈发觉自己的无知',
        '读书和学习是在别人思想和知识的帮助下，建立起自己的思想。',
        '书籍是人类进步的阶梯。',
        '读书是最好的学习，追随伟大人物的思想，是富有趣味的事情。',
        '读万卷书，行万里路。'
        ],
        alertTitle: '',
        links: []
    };
  },
  created() {
    this.userInfo = JSON.parse(localStorage.userInfo);
  },
  mounted() {
    this.getAlert()
    this.getLinks()
  },
  methods: {
    async getLinks() {
      const { data: res } = await reqLinks()
      this.links = res.data
    },
    getAlert() {
      let i = Math.floor(Math.random() * 10)
      this.alertTitle = this.alertArr[i]
    }
  },
};
</script>

<style scoped>
.container {
  background-color: #ffffff;
  padding: 15px;
}
/* .calendar {
  width: 410px;
  height: 370px;
  border: 1px solid black;
  text-align: center;
} */
.alert {
  width: 770px;
}
/deep/ .el-calendar {
  width: 350px;
  height: 350px;
}
/deep/ .el-calendar__body {
  width: 400px;
  height: 350px;
  padding: 0;
}
/deep/ .el-calendar-table {
  width: 360px;
  height: 307;
}
/deep/ .el-calendar-day {
  height: 41px !important;
}
/* .timeline {
} */
/deep/ .el-card__body {
  height: 60px;
  width: 330px;
  background-color: #f9f9fa;
}
/deep/ .el-timeline-item__content {
  width: 330px;
}
.img {
  width: 60px;
  height: 60px;
  margin-right: 15px;
}
.contents {
  display: flex;
  align-items: center;
  padding-left: 10px;
  
}
.alert {
  margin-bottom: 15px;
}
.collecting {
  display: flex;
  flex-wrap: wrap;
}
.collecting .box {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #EDEDED;
  border-radius: 12px;
  margin: 5px;
}
.collecting .box .left {
  margin-left: 15px;
}
.collecting .box .img img {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  border: 1px solid gray;
}
.small_box {
  display: flex;
  flex-direction: column;
}
.wrap {
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.juzi {
  margin-left: 5px;
  width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #528DAB;
}
.top {
  margin-top: -15px;
  font-size: 20px;
  font-weight: bold;
  width: 150px;
  text-align: center;
  background-color: #fff;
  color: #79797A;
}
.neirong {
  font-size: 18px;
  margin: 25px;
  color: #A59796;
}
.bottom {
  margin-bottom: 15px;
  color: #A59796;
  font-size: 18px;
}
.contents {
  line-height: 62px;
}
</style>
